<template>
  <div class="gallery page">
    <div class="news" v-for="(item, index) in typeList" :key="item.creationTypeModel.id">
      <div class="title">
        <p>{{ item.creationTypeModel.creationTypeName }}</p>
        <div class="icon">
          <span><i class="iconfont icon-left" @click.stop="pre(item.creationTypeModel.id)"></i></span>
          <span> <i class="iconfont icon-right" @click.stop="next(item.creationTypeModel.id)"></i></span>
        </div>
      </div>
      <div class="list">
        <profile-card
          v-for="(item1, index1) in item.list"
          :key="item1.Id"
          :itemInfo="item1" @click.stop="toDetail(item.creationTypeModel.id,item1.Id)"
        ></profile-card>
      </div>
    </div>
  </div>
</template>
<script>
import profileCard from "../profilelist/item.vue";
import _ from "lodash"
import {IndexScriptWritingListByWhere,IndexCreationTypeListByTypeId,ScriptWritingListByWhere} from "@/api/ScriptWriting"
import {getUserInfo} from "../../utils/auth";

export default {
  components: {
    profileCard,
  },
  data() {
    return {
      typeList:[],
      hotList: [
        {
          bg: require("@/assets/img/profile_1.png"),
          name: "我是倪妮啊",
          id: "wsnn870",
          tag: ["商业", "金融财经", "美食餐饮", "情感博主"],
          total: 666,
          star: 4.9,
          title: "打工日记（当我第一天上班）",
          desc: "剧情，续集类剧本。娱乐反转为主。社 死现场",
          viewNum: 1232,
          thumbNum: 1231,
          price: 80,
        },
        {
          bg: require("@/assets/img/profile_1.png"),
          name: "我是倪妮啊",
          id: "wsnn870",
          tag: ["商业", "金融财经", "美食餐饮", "情感博主"],
          total: 666,
          star: 4.9,
          title: "打工日记（当我第一天上班）",
          desc: "剧情，续集类剧本。娱乐反转为主。社 死现场",
          viewNum: 1232,
          thumbNum: 1231,
          price: 80,
        },
        {
          bg: require("@/assets/img/profile_1.png"),
          name: "我是倪妮啊",
          id: "wsnn870",
          tag: ["商业", "金融财经", "美食餐饮", "情感博主"],
          total: 666,
          star: 4.9,
          title: "打工日记（当我第一天上班）",
          desc: "剧情，续集类剧本。娱乐反转为主。社 死现场",
          viewNum: 1232,
          thumbNum: 1231,
          price: 80,
        },
        {
          bg: require("@/assets/img/profile_1.png"),
          name: "我是倪妮啊",
          id: "wsnn870",
          tag: ["商业", "金融财经", "美食餐饮", "情感博主"],
          total: 666,
          star: 4.9,
          title: "打工日记（当我第一天上班）",
          desc: "剧情，续集类剧本。娱乐反转为主。社 死现场",
          viewNum: 1232,
          thumbNum: 1231,
          price: 80,
        },
      ],
      dspCurrentPage:1,
      dspTotal:undefined,
      dspFullPage:undefined,
    };
  },
  created(){
    this.getType()
  },
  methods:{
    getType(){
      IndexCreationTypeListByTypeId().then((res)=>{

        this.typeList.push(res.data[0])
        console.log('李炎',this.typeList)
        // _.forEach(this.typeList,(v,k)=>{
        //   this.getList(v.creationTypeModel.id,k)
        // })
        if(getUserInfo() == undefined){
          this.getListByPage(this.typeList[0].creationTypeModel.id,0)
        }else{
          this.getList(this.typeList[0].creationTypeModel.id,0)
        }

      })
    },
    getList(id,k){
      ScriptWritingListByWhere({creationTypeId:id,page:this.dspCurrentPage,pagesize:8}).then((res)=>{

        this.dspTotal=res.total
        //计算总页数
        if( (this.dspTotal%8) !=0 ){
          this.dspFullPage=parseInt(this.dspTotal/8)+1
        }else{
          this.dspFullPage=parseInt(this.dspTotal/8)
        }
        console.log('总页数，',this.dspFullPage)
        this.typeList[0].list=res.data

      })
    },
    getListByPage(id,k){
      IndexScriptWritingListByWhere({creationTypeId:id,page:this.dspCurrentPage,pagesize:8}).then(res=>{
        this.dspTotal=res.total
        //计算总页数
        if( (this.dspTotal%8) !=0 ){
            this.dspFullPage=parseInt(this.dspTotal/8)+1
        }else{
            this.dspFullPage=parseInt(this.dspTotal/8)
        }
        console.log('总页数，',this.dspFullPage)
        this.typeList[0].list=res.data
      })
    },
    pre(id){

      switch (id) {
        //短视频翻页
        case 1:

          if( this.dspCurrentPage <= 1){

          }else{

            this.dspCurrentPage-=1
            this.getListByPage(id,0)

          }

          break;
      }
    },
    next(id){
      switch (id) {
        case 1:

          if(this.dspCurrentPage >= this.dspFullPage){

          }else{
            this.dspCurrentPage+=1
            this.getListByPage(id,0)
          }

          break;

      }
    },
    toDetail(type,id){
      switch (type) {
        case 1:
          if(getUserInfo() == undefined){
            this.$message.error('请登录后查看')
          }else{
            this.$router.push({path:'/dsp/dspDetail',query:{id:id}});
          }

          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.gallery {
  padding-bottom: 30px;
  .news {
    margin-top: 30px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #cccccc;
      p {
        font-size: 16px;
        font-weight: bold;
        color: #111111;
        padding-bottom: 10px;
        position: relative;
        &::after {
          display: block;
          content: "";
          width: 100%;
          height: 3px;
          background: #2eb0c6;
          position: absolute;
          bottom: -1px;
          left: 0;
        }
      }
      .icon {
        display: flex;
        span {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 18px;
          height: 18px;
          margin-left: 10px;
          background: #e5e5e5;
          border-radius: 2px 0px 0px 0px;
          cursor: pointer;
        }
        i {
          color: #666666;
          font-size: 14px;
        }
      }
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 22px;
    .profileCard {
      width: calc((100% - 60px) / 4);
      margin-right: 20px;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>
